<template>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>堂食订单</span>
      </div>
    </div>
    <el-tabs v-model="orderType" class="mar_b20" @tab-click="handleTabClick">
      <el-tab-pane label="订单管理" name="1"></el-tab-pane>
      <el-tab-pane label="待完成订单" name="2"></el-tab-pane>
      <el-tab-pane label="已完成订单" name="3"></el-tab-pane>
    </el-tabs>
    <div class="pad_b_30 orderSeatch">
      <el-form :inline="false" :model="formInline" class="demo-form-inline" label-width="100px">
        <template>
<!--          <el-form-item label="订单状态：">-->
<!--            <el-radio-group v-model="formInline.state" @change="selectType">-->
<!--              <el-radio-button label="0">不限</el-radio-button>-->
<!--              <el-radio-button label="1">待完成</el-radio-button>-->
<!--              <el-radio-button label="2">已完成</el-radio-button>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
        </template>
<!--        <el-form-item label="订单来源：" class="mar_t20">-->
<!--          <el-radio-group v-model="formInline.origin" @change="selectType">-->
<!--            <el-radio-button label="0">不限</el-radio-button>-->
<!--            <el-radio-button label="1">微信小程序</el-radio-button>-->
<!--            <el-radio-button label="2">支付宝小程序</el-radio-button>-->
<!--            <el-radio-button label="3">收银台</el-radio-button>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="支付方式：" class="mar_t20">-->
<!--          <el-radio-group v-model="formInline.payMode" @change="selectType">-->
<!--            <el-radio-button label="0">不限</el-radio-button>-->
<!--            <el-radio-button label="1">微信支付</el-radio-button>-->
<!--            <el-radio-button label="2">支付宝支付</el-radio-button>-->
<!--            <el-radio-button label="5">余额支付</el-radio-button>-->
<!--            <el-radio-button label="6">现金支付</el-radio-button>-->
<!--            <el-radio-button label="7">线下支付</el-radio-button>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item label="查询日期：" class="mar_t20">
          <div class="flex-bet">
            <div>
              <el-radio-group v-model="formInline.timeType" @change="selectType">
                <el-radio-button label="0">全部</el-radio-button>
                <el-radio-button label="1">今天</el-radio-button>
                <el-radio-button label="2">近七天</el-radio-button>
                <el-radio-button label="3">近十五天</el-radio-button>
                <el-radio-button label="4">具体日期</el-radio-button>
              </el-radio-group>
              <span class="mar_l20" v-if="formInline.timeType=='4'">
                <el-date-picker v-model="formInline.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="yyyy年MM月dd日" @change="selectType"></el-date-picker>
              </span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="模糊搜索：" label-position="top" class="mar_t20">
          <div class="flex">
            <div>
              <el-input type="text" v-model="formInline.keyword" style="width: 500px;"
                        placeholder="请输入订单相关的订单号/手机号/订单姓名/昵称" @input="selectType"></el-input>
            </div>
            <div class="pad_r_20 mar_l20">
              <!--                            <a :href="handelExport()" class="mar_l10"><el-button  size="medium" type="primary">导出订单</el-button></a>-->
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="tabledata mar_t20">
      <el-table
          v-loading="listLoading"
          :data="list"
          :element-loading-text="elementLoadingText"
          stripe
          row-key="id"
          style="width: 100%"
          @selection-change="setSelectRows">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="takeNo"-->
<!--            label="序号"-->
<!--            width="60"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <div class="flex">#{{scope.row.takeNo}}</div>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
            prop="outTradeNo"
            label="订单号"
        >
        </el-table-column>
        <el-table-column
            prop="regionName"
            label="桌台区域"
        >
          <template slot-scope="scope">
            <div class="flex">{{scope.row.regionName}}-{{scope.row.typeName}}-{{scope.row.number}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="eatType"
            label="就餐模式"
        >
          <template slot-scope="scope">
            <div class="flex">
              <div v-if="scope.row.eatType=='1'">先结账后用餐</div>
              <div v-if="scope.row.eatType=='2'">先用餐后结账</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="用餐人数/桌位费"
        >
          <template slot-scope="scope">
            <div class="">
              <div>{{ scope.row.people }}  人</div>
              <div>{{ scope.row.tablewareMoney }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="开台时间/就餐时间"
        >
          <template slot-scope="scope">
            <div class="">
              <div>{{ scope.row.createdAt }}</div>
              <div class="" v-if="scope.row.receiptAt && scope.row.state=='2'">
                就餐时间：{{timeStamp(Math.round(new
              Date().getTime()/1000).toString()-scope.row.receiptAt)}}
              </div>
              <div v-if="scope.row.completeAt && scope.row.payAt  && scope.row.state=='3'">
                就餐时间：{{timeStamp(scope.row.completeAt-scope.row.receiptAt)}}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="订单来源"
        >
          <template slot-scope="scope">
            <div class="flex">
              <span v-if="scope.row.origin=='1'"><el-tag effect="dark" size="mini" type="success">微信小程序</el-tag></span>
              <span v-if="scope.row.origin=='2'"><el-tag effect="dark" size="mini" type="success">微信公众号</el-tag></span>
              <span v-if="scope.row.origin=='3'"><el-tag effect="dark" size="mini" type="info">支付宝小程序</el-tag></span>
              <span v-if="scope.row.origin=='4'"><el-tag effect="dark" size="mini" type="danger">百度小程序</el-tag></span>
              <span v-if="scope.row.origin=='5'"><el-tag effect="dark" size="mini">收银台下单</el-tag></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="应付金额"
        >
          <template slot-scope="scope">
            <div class="">
              <div class="color-red wei">{{ scope.row.money }}</div>
<!--              <div>-->
<!--                <span v-if="scope.row.payMode=='1'">微信支付</span><span v-if="scope.row.payMode=='2'">支付宝支付</span><span-->
<!--                  v-if="scope.row.payMode=='3'">百度支付</span><span v-if="scope.row.payMode=='4'">公众号支付</span><span-->
<!--                  v-if="scope.row.payMode=='5'">余额支付</span><span v-if="scope.row.payMode=='6'">线下支付(现金支付)</span><span-->
<!--                  v-if="scope.row.payMode=='7'">线下支付(pos机支付)</span><span-->
<!--                  v-if="scope.row.payMode=='8'">线下支付(自有微信支付)</span><span-->
<!--                  v-if="scope.row.payMode=='9'">线下支付(自有支付宝支付)</span>-->
<!--              </div>-->
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="支付状态"
        >
          <template slot-scope="scope">
            <div class="">
              <div class="color-red wei" v-if="scope.row.state=='2' && scope.row.eatType=='1'">已支付</div>
              <div class="color-red wei" v-if="scope.row.state=='2' && scope.row.eatType=='2'">待接单</div>
              <div class="color-red wei" v-if="scope.row.state=='3' && scope.row.eatType=='2'">已支付</div>
            </div>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--            label="商家实得"-->
<!--            prop="storeActualMoney"-->
<!--            width="100"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <div class="color-green">{{scope.row.storeActualMoney}}</div>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
            label="订单状态"
            width="100"
        >
          <template slot-scope="scope">
            <div class="color-green"
                 v-if="(scope.row.state=='3' && scope.row.eatType=='1') || (scope.row.state=='3' && scope.row.eatType=='2')">
              已完成
            </div>
            <div class="color-orange"
                 v-if="(scope.row.state=='2' && scope.row.eatType=='1') || (scope.row.state=='2' && scope.row.eatType=='2')">
              就餐中
            </div>
            <div class="color-red" v-if="scope.row.state=='1' && scope.row.eatType=='1'">待付款</div>
            <div class="color-red" v-if="scope.row.state=='1' && scope.row.eatType=='2'">待接单</div>
            <div class="color_9" v-if="scope.row.state=='4'">已取消</div>
            <div class="color_9" v-if="scope.row.state=='5'">已退款</div>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--            label="操作"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <div class="flex">-->
        <!--              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>-->
        <!--              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          :current-page.sync='page.currentPage'
          @current-change="handleCurrentChange">
      </el-pagination>
      <!--      <edit ref="edit" @fetchData="fetchData"></edit>-->
    </div>
  </div>
</template>
<script>
import {outOrderList} from '@/api/instore';
import {changeDate} from '@/utils/index';
import index from '../../api/index';

export default {
  // components: { OrderState, OrderList },
  created() {
    this.init();
  },
  data() {
    return {
      orderType: '2',
      formInline: {
        time: [new Date(), new Date()],
        timeType: '1',
        state: '1',
        origin: '0',
        keyword: '',
        payMode: '0',
        orderType: '1',
      },
      list: [],
      listLoading: false,
      selectRows: "",
      elementLoadingText: "正在加载...",
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
    };
  },
  computed: {
    keyword: {
      get() {
        return this.formInline.keyword;
      }
    }
  },
  watch: {
    keyword() {
      console.log(1);
      this.init();
    }
  },
  methods: {
    async init() {
      var params = {
        page: this.page.currentPage,
        timeType: this.formInline.timeType,
        startTime: this.formInline.timeType == '4' && this.formInline.time ? changeDate(this.formInline.time[0]) : '',
        endTime: this.formInline.timeType == '4' && this.formInline.time ? changeDate(this.formInline.time[1]) : '',
        state: 1,
        keyword: this.formInline.keyword,
        orderType: this.formInline.orderType,
        payMode: this.formInline.payMode,
        eatType:2,
      };
      const {data, count} = await outOrderList(params);
      this.list = data;
      this.page.total = count;
      this.bus.$emit('loading', false);
    },
    handleTabClick() {
      if (this.orderType == '1') {
        this.$router.push(`/instoreorder?orderType=1`);
      } else if(this.orderType=='2'){
        this.$router.push(`/instoredwcorderquery?orderType=2`);
      }else if(this.orderType=='3'){
        this.$router.push(`/instoreorderquery?orderType=3`);
      }
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.init();
    },
    selectType() {
      this.init();
    },
    handelExport() {
      let startTime = this.formInline.time ? changeDate(this.formInline.time[0]).substring(0, 10) : '';
      let endTime = this.formInline.time ? changeDate(this.formInline.time[1]).substring(0, 10) : '';
      let backendPath = index.backendPath;
      return backendPath + 'channel/order/order-list?export=1' + '&page=' + this.page.currentPage + '&orderType=' + this.formInline.orderType + '&timeType=' + this.formInline.timeType + '&orderState=' + this.formInline.orderState + '&serviceAt=' + this.formInline.serviceAt + '&startTime=' + startTime + '&endTime=' + endTime;
    },
    timeStamp(second_time) {
      var time = parseInt(second_time) + "秒";
      if (parseInt(second_time) > 60) {
        var second = parseInt(second_time) % 60;
        var min = parseInt(second_time / 60);
        time = min + "分" + second + "秒";
        if (min > 60) {
          min = parseInt(second_time / 60) % 60;
          var hour = parseInt(parseInt(second_time / 60) / 60);
          time = hour + "小时" + min + "分" + second + "秒";
          if (hour > 24) {
            hour = parseInt(parseInt(second_time / 60) / 60) % 24;
            var day = parseInt(parseInt(parseInt(second_time / 60) / 60) / 24);
            time = day + "天" + hour + "小时" + min + "分" + second + "秒";
          }
        }
      }
      return time;
    },
  }
};
</script>
<style lang="scss" scoped>
.search .el-form-item__label {
  padding-right: 10px;
  padding-left: 15px;
}

.el-form-item__content .el-input {
  width: 300px;
}

.el-form-item {
  margin-bottom: 8px;
}

.orderGk {
  background: #F9F9F9;
}
</style>